University of California 


Berkeley 


Haas School of Business 


Dreamweaver CS5 


Module 1: Website Development 


academyX NISHIKAI 


expert computer training Trainings Des ign* Technology 


Dreamweaver CS5 - Module 1: Website Development 


Dreamweaver CS5 
Module 1: Website Development 


Last revised: October 29, 2010 


Copyrights and Trademarks 


©2010 Nishikai Consulting, Helen Nishikai 
Oakland, CA 94610 
www.nishikai.com 
info@nishikai.com 


Nishikai Consulting gives permission to the Haas School of Business of the University of California 
at Berkeley to reprint this training manual for internal use only. No re-sale of this material or 
renunciation of copyrights are granted by this author. 


Any mention or use of Adobe®, University of California, or any third party products is hereby 
acknowledged by Nishikai Consulting to be for the sole purpose of editorial and educational use of 
this training manual and for the benefit of the mentioned parties. 


©2010 Nishikai Consulting Page i 


Dreamweaver CS5 - Module 1: Website Development 


Table of Contents 


XII. 
XIII. 


Course Overview and Resources ..................... een 1 
How Websites WOrR ut sino tcu nci nu b aimee. 3 
Planmnea VVC SLUG seite eteeti E 6 
Dreamweaver. Baskts.ausensus aliit iut steht settle de int eatin: 10 
Defining a Local Sites. oi eer eade Ote tet adu 13 
Building a Basic Pâge gioioso aana aa enis Ea dpi AUI co bepdp leti Du 16 
Basie Formatting using CSS «ccce eerte tte er etote eina icta 22 
Maria gino T3565. cecien deed E eme dd mde 30 
CRC AUIS Lis ee Ace hee: AE EE AAA AE E MEE C 34 
Using Tables Tor Data zdsnuane aset ie essit E nte eia tets 37 
Gre3unp LINKS aao ae Od dde cO edd Da M ME 41 
Basic Page Layout using CSS «sucede otiosis Pe ieitirietteia 43 
Creating More Pass axi qure in et dace a dandi ete Lea untae 52 


(02010 Nishikai Consulting Page ii 


Dreamweaver CS5 - Module 1: Website Development 


l. Course Overview and Resources 


A. Purpose of this class 


The objective of this course is to learn how to use the basic functions in Dreamweaver to build a 
simple, five page website. 


As an example in class, we will build a website for the Underwater Basket Weaving Club at Haas. 


oly Favorites @ Haas Underwater Basket Weaving a ~A 7 & æ v Pagey Safetyy Tools v e- 


en The Haas Underwater Basket Weaving Club 
Academics 

Officers T 

Events 


Join Us 


The Underwater Basket Weaving Club organizes activities to assist members in evaluating careers in basket weaving 
and identifying current career opportunities, extend the practical underwater education with job-specific knowledge and 
connect members with alumni and other weaving professionals. 


Popular Events 


Some of the club's more popular events include the Underwater Ball in the fall, a recruiting trip to the Caribbean, Friday 
visits to local basket weaving firms, happy hour gatherings with alumni, information sessions about careers/companies, 
interview preparation sessions and educational sessions on job functions. 


Join Us 


hether you are interested in technology basket weaving in Silicon Valley, running the corporate war 
chest at the Great Barrier Reef, or leveraged buyouts on sunny beaches, the Underwater Basket 

eaving Club organizes activities to ensure that members are prepared to achieve their goals within 
the full spectrum of available opportunities at Haas. 


jB Computer | Protected Mode: Off 
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B. Target audience and prerequisites for this class 

The target audience for this course is anyone who is interested in how to build a simple website 
using Dreamweaver. You do not need to know HTML, CSS, Dreamweaver, or other web 
technologies. However, you should be very comfortable with using a computer, including file and 
folder management, saving files, working with general software applications, and viewing websites 
on a browser. 


C. Resources 


For additional information about website development and Dreamweaver, see: 


e =http://www.w3schools.com/ 
Great resource for how to build a website with hundreds of HTML and CSS examples. 


e http://www.usability.gov/ 
Best practices guidelines for building websites that are human-friendly. 


e http://www.adobe.com/support/dreamweaver 
Official support site for Adobe Dreamweaver. 


e =http://www.w3.org/ 
Official website for the World Wide Web Consortium, which sets standards for HTML, CSS, and 
other web technologies. 


e http://www.csszengarden.com/ 
One of many good websites about CSS. 
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ll. How Websites Work 


A. The Internet 

The Internet is a worldwide network of computer systems through which information can be 
easily shared. The World Wide Web is one method of sharing information through the Internet. 
Other methods include FTP (file transfer protocol), IM (instant messenger), and email. 


B. Browsers 

To view information through the World Wide Web, the end user must have a type of software 
application called a browser installed on a computer that is connected to the Internet. Current 
browsers include Internet Explorer, Mozilla Firefox, Google Chrome, Safari, and Opera. 


Because each browser and each browser version interprets code slightly differently, you should test 
your website on several browsers before it is uploaded to a live web server. 


C. Web server 

A website is composed of many files that are located on a web server. A web server is a computer 
connected to the internet that has special software installed on it (e.g. Microsoft Internet 
Information Server or Apache), which allows it to host a web site. 


If you work for a large company, the company may have its own web servers. Otherwise, you can 
purchase an account at a web hosting company, which will provide you with space on their web 
servers for your website files. 


D. URL, Domain Name, and IP Address 


To view a web page in a browser, you must know the URL (Uniform Resource Locator) of that web 
page. The URL is also called a web page address or a website address. It looks like this: 


http://www.example.com/index.html 
http://192.0.2.1/testing/ 


The domain name uniquely identifies a website. Examples of domain names are "example.com", 
"google.com", "berkeley.edu", and "irs.gov". You can reserve a domain name through a domain 
name registrar company. 


A domain name points to the IP address (Internet Protocol address) of the web server. All web 
servers connected to the Internet must have an IP address, although they do not have to have a 
domain name. Examples are "192.0.2.1" and "24.23.247.3". 


If you type the domain name of a website into your browser without specifying a web page URL, 
your browser will display the designated home page of the website. The home page is a web page 
that has been marked as the default page to display by the web server. 
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E. Web pages 

In asimple website, each web page is a separate file written in a coding language called HTML 
(Hypertext Markup Language). These files are often called “html files” or “web page files”. In 
addition, each html file may link to supplemental files for images, CSS, scripting, or other support 
materials. 


The code in an html file can be written by hand, if you know HTML. However, you can also use a 
web design application such as Dreamweaver to write the HTML code for you. 


F. Different languages for different purposes 
Although all web pages must be written in HTML for a browser to display it, there are several 
coding languages that work together to create a modern web page. 


The content of a web page is controlled by the HTML code. The text that appears on a page is typed 
into the HTML code. The images that appear on a page are inserted by using the HTML code. 


The structure of a web page is also controlled by the HTML code. This is the underlying logical 
structure of the content, such as what text is considered a heading, what content is considered a 
table, and what code is inside a section (e.g. header, footer, navigation bar). 


The presentation of a web page is controlled by CSS (Cascading Style Sheets). The presentation is 
how the page looks, including the font, font size, alignment, colors, and page layout. Although HTML 
has been used for formatting in old websites, the recommended method for modern websites is to 
use CSS code. 


The interactivity on a web page is controlled by any number of different languages. For example, 
a drop-down navigation menu can be created using HTML, CSS and Javascript, as in Ajax. Or an 
advertisement can be inserted using Flash. 


In this course, we will cover how Dreamweaver can create HTML and CSS code for our web pages, 
but we will not discuss interactivity. 


G. Static websites, Dynamic websites, and Content Management Systems 

In a simple website, each web page is created and saved individually by a person. This is considered 
a static website, and this method is best for websites where there are not that many pages and 
the content does not change often. 


In a more complicated site, each web page may not be created by a person. The web page may be 
created "on the fly" by the web server at the moment a user clicks a link to request that page. This is 
called a dynamic website. For example, if you click a link on Amazon.com to view a product, the 
HTML code to display that product page is created at that moment by a server-side script 
gathering data from a database. Common languages for the server-side script are PHP, Java/JSP, 
ASP.NET, Perl, and Coldfusion. 


A popular type of dynamic website is a CMS (Content Management System). This is a combination 
of pre-built server-side scripts and a database. Although a website developer needs to design and 
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setup the CMS initially on a web server, a content manager can easily update the content of a CMS 
without needing to know HTML or CSS. Common CMS systems include Drupal, Joomla, and 
Wordpress. 


In this course, we will create a simple, static website. 


H. How the Browser displays a Web page 
When a user types a URL into a browser or clicks a link to view a new page, the browser sends a 
request to the Internet to locate the web server to which that URL or link points. 


The request arrives at the web server, and a copy of the requested web page is downloaded back to 
the user’s browser. 


The browser reads the HTML code in the web page and downloads any additional files as written in 
the code, such as image files or CSS files. Then, the browser interprets the HTML code and displays 
the page in its window. If it does not understand any of the coding, the browser may display an 
error or it may guess what the corrected code should look like. 


The copy of the web page and additional files are kept in the temporary internet files cache of 
the browser. They will stay there until the cache fills up and the old files are removed. If the files are 
still in the cache when the user tries to view the same web page again, the browser will check the 
modification dates of the cached files and the website files, and it will display the files from the 
cache if the dates are the same. 


jb "m d BARN m 
| IS 


a i 


The Internet Cloud 


Web Server 
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lll. Planning a Website 


Before we start building our website in Dreamweaver, we should plan the objectives of the site, the 
organizational structure, the folder structure, the basic page design, and content. This will keep us 
focused as we develop the website. 


A. Website objectives 

The website objectives or website goals states the purpose of the website. This includes the 
business objectives that the website must support, the required features, the target audience, and 
other information to support the development process. This might be as simple as a one sentence 
statement or as elaborate as a multi-page project proposal document. 


For example, the objectives of our sample website could be: 


The Haas Underwater Basket Weaving Club website will support the mission of the club by 
providing up-to-date information about the club, the club events, the club officers, 
recommended classes, and how to join the club. The audience will be both current and 
potential club members. 


B. Organizational structure 

Once the objectives are set, we need to sketch an organizational structure for the website. This 
structure helps us to decide what content goes on what page, how many pages we need, how users 
can link to each page, and what the file name of the page will be. This includes a home page as well 
as additional pages for our content. This structure is often represented by a schematic layout called 
a site map. 


For example, our sample website could have this site map: 


Homepage 
index.htm 


Events Officers Academics Join 
events.htm officers.htm academics.htm join.htm 
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C. Folder structure 


The folder structure is different from the organizational structure. The folder structure is how 
the files will be saved and organized physically in the website directory. 


All web files to be used in a website must be organized within a site root folder. At the top level of 
this site root folder, the file called index.htm (or index.html) is the home page. Images are often 
saved into a separate images folder. While you are developing the website, you might create 
temporary folders to keep content data. 


For example, for our sample site, we know that we will have 5 HTML files plus images, a CSS file, 
and some Word document with content. So we might have this folder structure: 


7 


Site root 
n i KE 
ii œ e e e € € h 
CONTENT images academics.  eventshtm index.htm join.htm officers.ht styles.css 
a htm m 
id academics.doc = ee 
8) events.doc S5 hdr_studentclubs.gif 
8) index.doc &-|img basket collage.jpg 
8) join.doc | img baskets.jpg 
1) officers.doc &-|img basketweaving.jpg 
&- img finished basket.jpg 
&-| img tshirt.jpg 
&-|img weaving.jpg 
&-| mem jack daniels.jpg 
= mem jane smith.jpg 
&-| mem joe merchant.jpg 
&-| mem john doe.jpg 
|) mem margaret ville.jpg 
57 spacer.gif 
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D. Page layout wireframe 


To create uniformity among the web pages in a website, you should plan a basic layout to use as a 
template for your pages. This page layout is often represented in a wireframe, which focuses on 
the placement of page elements. 


For example, our sample wireframe could be: 


Haas MBA Navigation Links 


Name of Club 


Left Navigation Links Content and Images 


E. Page design mockup 


Once you have a 
wireframe, you can 
create a page 
design mockup in Ha 
any graphics 
application, such as 
Photoshop or 
Fireworks. You can 


TheBerkeleyMBA 


The Haas Underwater Basket Weaving Club 


Academics 
Members 
Events 


Join Us 


also sketch this on 
paper. 


The purpose of the 


mockup is to provide 

d s The Underwater Basket Weaving Club organizes activities to assist members in evaluating careers in 
ag uideline for the basket weaving and identifying current career opportunities, extend the practical underwater education 
color palette, the font with job-specific knowledge and connect members with alumni and other weaving professionals. 


and font sizes, and 
the dimensions of 


Popular Events 


: Some of the club's more popular events include the Underwater Ball in the fall. a recruiting trip to the 
the page and images. Caribbean, Friday visits to local basket weaving firms. happy hour gatherings with alumni, 
information sessions about careers/companies, interview preparation sessions and educational 
sessions on job functions. 
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F. Page content and images 


Page content can be textual or images. 


Text content can be typed directly onto the html file in Dreamweaver or it can be copied from 
another source, such as a Microsoft Word document. If you do not have the final text content 
available as you start to develop your web pages, you can use placeholder text instead of the final 
text. Remember to replace the placeholder text with the actual text before you upload the finalized 
web pages to your web server. 


Images are the pictures to be displayed on your web page or to be used as background images in 
CSS. The image file type must be .gif, .jpg, or .png. The images should be prepared in a graphics 
program, such as Photoshop or Fireworks, so that they are the correct dimensions and are 
optimized for the web. 
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IV. Dreamweaver Basics 


Now that we have planned the website, Dreamweaver provides a way of building the web pages 
without knowing HTML or CSS. 


A. WYSIWYG Theory 

Dreamweaver and similar web design applications use a graphical interface, so that we can design a 
web page visually instead of typing the HTML or CSS code. These types of web design applications 
are called WYSIWYGs (What You See Is What You Get). As we format and place objects visually, 
these programs generate the underlying code for us. 


However, these programs do not write code perfectly. Although you can create simple pages 
completely through the WYSIWYG interface, you should learn some HTML and CSS if you need to 
troubleshoot an issue or build complicated pages. 


B. Local Site and Remote Site 

In Dreamweaver, we create, update, and test pages in our local computer first. To do so, we 
designate a folder in our computer as a Local Site and save all our web files into that folder using 
our planned folder structure. Then, when we are ready, we copy these files to the web server 
location, which is also called the Remote Site. 


In this course, we will only work with the Local Site to create our simple website. 


Remote Site 


i 
^ 


1 The Internet Cloud 


lu 
H 


an 
Local Site 
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C. Parts of the Dreamweaver Window 


The Dreamweaver window contains the following main elements: 


Main Toolbar Document Workspace 

Document Toolbar Window Selector Panel Groups 
Diy Me Oe Ar orsign + ||D — —— 3 Q cud GOR 
Be Est yew pun Mid amet Commands Ste Window | Hep = precem 


Urtitied-1 x 


Code | Spit | Deson | Code fF — UveVem Inspect Ç), d (Dy, (C Tiie United Cocurment 
© O Address: Rm. 


[RIO Q 100% v 738x552w 1X/1sec Unicode (UTF-8) 


«Cm 
Qo 1 local tems selected totali (Log... ) 


Tag Selector Properties Inspector 


D. Document Toolbar 


The document toolbar changes how we view the web page file. The main commands that we will 
use are: 


File Name Preview in Browser Document Title 


LiveCode F | LiveView | Inspect (&j, Multiscreen KA, (= | Tite: Untitled Document 


Code/Split/Design 
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E. Properties Inspector 


The properties inspector lets us view and change the properties of a selected object in the 
document window. Each type of object has a different set of properties. 


PROPERTIES 


<> HTML Targeted Rule <New CSS Rule» X Font Default Font vy BIi2222 
ET3 s m - JA 


Page Properties... 


F. Panel Groups 


The panel groups provide information as well as 
methods to make changes to the web files and website. 


To open or close a panel group, click the name of a panel. 
If you need a panel that is not currently displayed, go to 
the Window menu and select the panel. 


nsert Ctrl- F2 
v Properties Ctrl F3 j Computer 
CSS Styles Shift+F11 ^. usi 
i 
AP Elements F2 


Multiscreen Preview 


Business Catalyst Ctrl+Shift+B 
Databases Ctrl+Shift+F10 
Rindinas Ctrl+Fl0 


C 

loper 
App Developer Plus 
Classic 
um G. Workspaces 
Codes Plus Workspaces are different layouts for the Dreamweaver 
window. You can select a workspace from the Workspace 
selector button, or you can save a new workspace. 


v Designer 
Designer Compact 
Dual Screen 
Reset ‘Designer’ 
New Workspace... 


Manage Workspaces... 


©2010 Nishikai Consulting Page 12 


Dreamweaver CS5 - Module 1: Website Development 


V. Defining a Local Site 


To use Dreamweaver to create a website, you should always designate a folder on your computer to 
be your Local Site. If you do not, you will not be able to use features such as using relative linking or 
point to a file to create a link. 


A. Defining a new Local Site 


Before you start this process, make sure you have created a folder in your computer that will 
contain the files for your website. This folder can be a completely empty folder for a brand new site, 
or a folder that contains some information, such as images or existing web pages. 


For this exercise, we will use the class folder called DW Development. 
1. In Dreamweaver, go to Site > New Site... 
2. Inthe Site Setup dialog box, type the name of the site in the Site Name field. 


3. Click the folder icon to the right of the Local Site Folder field. 
i 


A Dreamweaver site is a collection of all of the files and assets you use in your 
website. A Dreamweaver site usually has two parts: a local folder on your 
computer where you store and work on files, and a remote folder on a server 
where you post the same files to the web. 


Servers 
Version Control 
b Advanced Settings 


Here you'll select toasts alder and a name for your Dreamweaver site. 


Le: Site D EEEEEEENEEEEEEEEEEEEENI 


C:UserslHelen Documents Unnamed Site 2 D 


Local Site Folder: 
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4.  Inthe Choose Root Folder dialog box, navigate to find the folder that will contain your website 
files. Open that folder and make sure that the correct folder is selected in the lower left 


message. 


w= 
A 
Recent Places 


Desktop 


a 
Lor 


Libraries 


LU 


Computer 


5, Click Select. 


6. In the Site 
Setup 
window, click 
Save. 


| || COMPLETED 
Jj CONTENT 


" images 


_ Date modified Type 
10/28/2010 5:11 PM File folder 
10/27/2010 3:35 PM File folder 
10/28/2010 5:10 PM File folder 


Site 
Servers 
Version Control 
> Advanced Settings 


_| computer where you store and work on files, and a remote folder on a server 


A Dreamweaver site is a collection of all of the files and assets you use in your 
website. A Dreamweaver site usually has two parts: a local folder on your 


where you post the same files to the web. 


Here you'll select the local folder and a name for your Dreamweaver site. 


Site Name: [ Underwater Basket Weaving 


Local Site Folder: | C:\Users\Helen\Desktop\DW Development & 
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B. Managing your sites 


z 
Manage Sites 


1. In Dreamweaver, go to Site > Manage Sites... 


. . . Underwater Basket Weaving 
2.  Inthe Manage Sites dialog box, select a site 


and click the commands on the right side to 

edit an existing site definition, duplicate a site 

definition, or remove a site definition. 

e This does not edit, duplicate, or remove the 
actual site files or folder. This only changes 
the definition of the Local Site. 


3. Click Done. 


C. Switching between your sites 


1. In the Files panel, click the current site name button. 


2. Select any other site name in the drop-down list. 


=- COMPLETED Folde 
H.-G CONTENT Folde 
+- images Folde 
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VI. Building a Basic Page 


First, we will build some web pages without page layout to learn about basic features in 
Dreamweaver. In a later section in this course, we will create a page layout template and copy these 


temporary pages into our final pages. 


A. Creating a HTML page 


You may already have a new, blank document open in Dreamweaver. If you do not, do the following 


to create a new, blank HTML document. 


1. In Dreamweaver, go to File > New... 
2.  Inthe New Document dialog box, make sure you have Blank Page selected in the left side. 
3. Select the Page Type as HTML. 
4. Select the Layout as «none». 
5. Click Create. 
r — 
New Document Í LX 
<none> 
a>) Blank Page eer Pi 
= 1 column fixed, centered, header and foot 
D Blank Template i 1column liquid, centered 
€ 1 column liquid, centered, header and foot 
5 EN 2 column fixed, left sidebar <No preview> 
u Page from Template =~ CSS 2 column fixed, left sidebar, header and fc 
PS fevatscipt 2 column fixed, - — 
rà Page from Sample =x XML 2 column fixed, right sidebar, header and 1 
9 P = 2 column liquid, left sidebar 
i M 2 column liquid, left sidebar, header and fc 
s Other = a T 2 column liquid, right sidebar id a 
am ASP VBScript 2 column liquid, right sidebar, header and 1 — 
«p ASP.NET C# 3 column fixed 
T) ASP.NET VB 3 column fixed, header and footer 
T) ColdFusion 3 column liquid 
"T, ColdFusion component | | 3 column liquid, header and footer DocType: XHTML 1.0 Transitional | 
To) JP HTMLS: 2 column fixed, right sidebar, heac ane 
T" PHP HTMLS: 3 column fixed, header and footer oi TEL 


Get more content... 


Attach CSS file: 


ext Editing 


Learn more about Business Catalyst 
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B. Saving a HTML page 
1. Goto File > Save. 
2.  Inthe Save As dialog box, make sure that the location is the top level of your Local Site folder. 


3. In the File name field, enter a file name. 


4. Click Save. 


r 
E Save As 
Savein: |]; DW Development ~ QÀ rea 
r= Name " Date modified Type 
d J} COMPLETED 10/28/2010511PM File folder 
Recent Places — i CONTENT 10/27/2010 3:35PM File folder 
uw J images 10/28/2010 510 PM — File folder 
Desktop 
Libraries 
§ A 
Computer 
a 4 "n h 
Network 
File name: index temp htm| X 
Save as type: | All Documents (" htm." html; shtm;" shtmi"hta; v | | Cancel | 
Unicode Normalization Form: C (Canonical Decomposition, followed by Canc w New Site 
[E] Indude Unicode Signature (BOM) Site Root 


C. Naming conventions 
When saving a file to be used in a website, such as a HTML page or an image file, name the file using 


lower case and no spaces. For example, an image file should be named “portrait_smith.jpg” instead 
of “Portrait Smith.jpg”. 


When naming HTML files, find out from the web server administrator whether the file name 
extension should be .htm or .html. Different web servers require one or the other ending. 
Whichever one you use, keep the ending consistent throughout the entire website. 


Keep in mind that all file names and folder names are public. Use appropriate and descriptive 
terms. 
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D. Entering text 


1. Click in the document window where you want to enter some text. 
2. Type the text. Separate paragraphs with a Return. 
[Dw m- èv àv 


Eile Edit View Insert Modify Format Commands 


| DESIGNER ~ | PE Q cie (ep mE 


Site Window Help 


index temp.htm* X 
|| Code | Spit [Design | LiveCode | 4 | LiveView | Inspect (gj, | Multiscreen {A © 


£3 @) Address: | file:///C|/Users/Helen/Desktop/DW Development/index temp.htm 


Title: Untitled Document 


{ii 


Underwater Basket Weaving Club 


Welcome to the website for the bestest club at Haas. 


PROPERTIES 


<> HTML Targeted Rule <New CSS Rule» 
[ Bis css | 


X | Font Default Font 
[ &dtRue | {CSS panel J| Sze None ~ rj 


Page Properties... List Item 


C\Users\Helen\Desktop\DW Development\index_temp.htm & | 


| BUSINESS CATALYST | CATALYST ff = 


» 


| ADOBE BROWSERLAE | BROWSERLAB |i = 
INSERT | 


E. Copying text into a page 


If you have text already typed into another document, such as a 
Microsoft Word document, you can copy and paste that into your 
HTML page. If your Word document is saved into a subfolder in the 
Local Site folder, you can easily open it through Dreamweaver. 


1. 


In the File panel, click the plus symbol to expand folders until 
you see the document that you want to open. 


2. Double click the document name. 


e If itis a file type that Dreamweaver can manage, such as a CSS 
file or TXT file, the document will open in Dreamweaver. 


e If Dreamweaver cannot manage that file type, such as a 
Microsoft Word file, the document will open in an 
appropriate program. 


( COMPLETED 
© CONTENT 


academics.doc 


events.doc 
index.doc 
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3. In the opened document, select and copy the text that you want to put in your HTML page. 
wis ger = medo [Compatibility Mode] - Microsoft Word z Erc x) 
| ia ici Insert — = ences diri À — yer ^0 
13 imes New Roman bd (aad | Ps E F AA aa 
| Gà B Z U- x x 9 [Ex 4aBbCcl AaBb( | AaBbCcl |. 
ee} wy. A-Ae| A a | Ai He |4 Emphasis  Headingi | TNormal |. Change Editing 
= ral Font Ir] Paragraph Styles fa | 
SEE EENE O 
4 [ [7 I 
Page:1of1 | Words: 146/146 | & | 2 auga = 100% -)——O——-¢+) || 
4. In Dreamweaver, click in the HTML document where you want to place the text, and then 


paste the text. 
[Dw m- 9» à- 


| vesioner + | GOO Osi CEES 


File Edit View Insert Modify Format Commands Site Window Help 


CG\Users\Helen\Desktop\DW Development\index_temp.htm 


Code | spit [ Design | | Live Code EX | live View | Inspect (gj, | Muitiscreen (By CŒ 


Title: (Untitled Document 


= XO © @ Address: | file:///C|/Users/Helen/Desktop/DW Development/index_temp.htm -| E 


Underwater Basket Weaving Club 

Welcome to the website for the bestest club at Haas. 

The Haas Underwater Basket Weaving Club 

The Underwater Basket Weaving Club organizes activities to assist members in evaluating careers in basket weaving and 
identifying current career opportunities, extend the practical underwater education with job-specific knowledge and connect 
members with alumni and other weaving professionals. 

Popular Events 

Some of the club's more popular events include the Underwater Ball in the fall, a recruiting trip to the Caribbean, Friday 
visits to local basket weaving firms, happy hour gatherings with alumni, information sessions about careers/companies, 
Join Us 

Whether you are interested in technology basket weaving in Silicon Valley, running the corporate war chest at the Great 
Barrier Reef, or leveraged buyouts on sunny beaches, the Underwater Basket Weaving Club organizes activities to ensure 
that members are prepared to achieve their goals within the full spectrum of available opportunities at Haas. 


<body> (RI Q [100% +] 767x515¥ 2K/1sec Unicode (UTF-8) 
PROPERTIES 

<> HTML TargetedRule <New CSS Rule» ~ | Font Default Font -BIEZSSE 

Edit Rule CSS Panel Sz Moe — | BE — ] 


[Page Properties... J [ust Item... 


(© Underwater Be ~» | | Local view - 


Rolera 
[Local Files | sie] 


© © Site - Underwater Ba... 


(E) COMPLETED Folde 
Eig CONTENT Folde 
Il) academics.doc 23KB Micrc 
events.doc 23KB Micrc 

W) join.doc 23KB Micrc 
members.doc 23KB Micrc 

© images Folde 
D index_temp.htm 1KB Firef 


4 n + 
1 local items selected totalli (Log... ] 
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F. Applying Heading formatting 


When you change a text from a regular paragraph to a Heading format, you are applying a logical 
structure to the content. This is very important for search engine optimization and accessibility. 


1. Select the paragraph that you want to mark as a Heading. 
e You can select the entire paragraph or click inside the paragraph. 


The Haas Underwater Basket Weaving Club 


The Underwater Basket oe Club maps : 


2.  Inthe Properties Inspector, click HTML if necessary. 


3. For the Format, select -Heading 1, Heading 2, etc. 
PROPERTIES — — 


Page Properties... | List Ite 


G. Page document title 


All web pages should have an appropriate and descriptive page document title. This title appears 
in the title bar of the browser and will be used as the name of a Favorite or Bookmark. 


1. In the Document toolbar, click inside the Title field and enter an appropriate title. 


2. Click anywhere outside the Title field or press Return to commit ie echanges: 


index_temp.htm* Xx 


—— ——— EY 


Code | Split | Design - || Live Code fe of Live View | Inspect (gj,  Multiscreen A, Tite: Haas Underwater Basket Weaving Club - Welcome 


Address: | file:///C|/Users/Helen/Desktop/DW Development/index_temp.htm 
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H. Previewing a page 
To test whether a web page is well built, you should test it in the most popular browsers. You can 
test a page directly from Dreamweaver. 


1. Save the page. 


2. In the Document toolbar, click the Preview/Debug in Browser button. 


index temp.htm* x C^Users'Helen Desktop DW | 
Code | Split | Design | 


£3 G Address: | file:///C|/Users/Helen/Desktop/DW Development, Preview in Firefox F12 


Preview in IExplore 


The Haas Underwater Bask Preview in Device Central Ctrl- Alt- F12 


Preview in Adobe BrowserLab Ctrl- Shift- F12 


The Underwater Basket Weaving Club organizes activities to as Edit Browser List... 


3.  Fromthe drop-down list, select the browser that you want to use. 
e If the browser you want to use is not in the list, first make sure that you have it installed on 
your computer. Then, select Edit Browser List from the drop-down list and click the plus 
button to add another browser application. 


SS M ——M — — —— —— Á— M — —À 
e Haas Underwater Basket Weaving Club - Welcome - Windows Internet Explorer E 

"e (QJ mn CAUsersV Helen Desktop DW Development\index_ temp.hr v | +r | x | [e Bing 2 - 
= = 


x Convert ~ PÀ Select 


|| sip Favorites | 35 g Adobe Acrobat 9 Pro [3: Acrobat Distiller9 fag Adobe Illustrator CS5 B Adobe InDesign CS5 


{Æ Haas Underwater Basket Weaving Club - Welcome fh E) y Gl ode v Pager Sefeyv Toosv @~ 5 


The Haas Underwater Basket Weaving Club 


The Underwater Basket Weaving Club organizes activities to assist members in evaluating careers in basket weaving and 
identifying current career opportunities, extend the practical underwater education with job-specific knowledge and connect 
members with alumni and other weaving professionals. 


Popular Events 
Some of the club's more popular events include the Underwater Ball in the fall. a recruiting trip to the Caribbean, Friday visits to 


local basket weaving firms, happy hour gatherings with alumni, information sessions about careers/companies, interview 
preparation sessions and educational sessions on job functions. 


Join Us 


Whether you are interested in technology basket weaving in Silicon Valley, running the corporate war chest at the Great Barrier 
Reef, or leveraged buyouts on sunny beaches, the Underwater Basket Weaving Club organizes activities to ensure that 
members are prepared to achieve their goals within the full spectrum of available opportunities at Haas. 


jM Computer | Protected Mode: Off 
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Vil. Basic Formatting using CSS 


If you want to change the formatting of the paragraphs, headings, or background colors, you should 
use CSS. Dreamweaver CS5 will automatically create new CSS styles for any formatting changes that 
you attempt. 


A. Internal and external stylesheets 


CSS rules can be kept in an internal stylesheet in the HTML page, in which case the formatting is 
only available within that HTML page. 


More commonly, CSS rules are kept in an external stylesheet, which is a separate file that 
contains only CSS rules. This option provides more consistency, because all HTML pages which link 
to that external stylesheet will share the same rules. Also, if you update a CSS rule on an external 
stylesheet, all HTML pages which use that rule will also update automatically. 


B. Creating and saving an external CSS stylesheet 


1. Go to File > New. 


2. In the New Document dialog box, select Blank Page from the left side. 
3. Under Page Type, select CSS. 
4. Click Create. 
New Document - - — —— - = coe ccc e Gee ee 9 88 
Page Type: Layout: 
Blank P. T» HM. 
E sc =) HTML template 
TO Library item 
B Blank Template =T) XSLT (Entire page) 
To) KAT Gregan) «No preview 
EN) =) ActionScript 
aie SS | 
a JavaScript ! 
cà Page from Sample =) XML Í 
=) ASP JavaScript 
| s Other > ASP VESaipt Cascading Style Sheet (CSS) document 
' To) ASP.NET C# 
l =) ASP.NET VB 
=) ColdFusion 
=) ColdFusion component 
TA JSP 
=) PHP 
| Help | | Preferences... Get more content... | Cancel 
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5. Go to File > Save As. 


6. In the Save As dialog box, select a location in the Local Site folder. 
e If you have only one external stylesheet, it can be saved at the top level of the Local Site 
folder. If you have more than one external stylesheet, usually they are saved in a subfolder 
named “css”. 


7. In the File name field, enter a file name with the ending .css, such as styles.css. 


8. Click Save. 
m Save As 


- @@ ru- 
| Date modified Type 
J) COMPLETED 10/28/2010 5:11 PM File folder 
Recent Places) CONTENT 10/29/2010 6:28 PM — File folder 


= J images 10/28/2010 5:10 PM File folder 


(&| index temp.htm 10/29/2010 6:53 PM Firefox Do 
Desktop 


Libraries 
f 


ON 


Computer 


Save astype: — "NiiBeauma "html" shtm:* shtml:*hta: ~ | 


Unicode Normalization Form: C (Canonical Decomposition, followed by Canc w 
[E] Indude Unicode Signature (BOM) 


C. Attaching an external CSS stylesheet to a HTML page 


To use the CSS styles saved into an external stylesheet, you must link to that stylesheet from the 
HTML page. 


1. Click on the name of your HTML page above the Document toolbar to switch back to the 
HTML page. 


"Design | | LiveCode f£ | LiveView | Im 


Address: | file: ///C|/Users/Helen/Desktop/DW Devel: 
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NJ 


Click the CSS Styles panel name to open the panel. 


3.  Atthe bottom of the panel, click the Attach Style Sheet 
button. 


4. Inthe Attach External Style Sheet dialog box, click Browse. 
[ Attach External Style Sheet 


File/URL: 
Add as: (9) Link 


ang 


Media: Y 


You may also enter a comma-separated list of media types. 


Dreamweaver has sample style sheets to get you started. i 


5.  IntheSelectStyle Sheet File + 


i Select Style Sheet File sarine = 
dialog box, select the Ei Select Style Sheet is 
il : © Fi Site Root 
external styl esheet. Select file name from: 9 File system 
© Data sources Server 
6. Click OK. Lookin: |J} DW Development - 0 ĉen 
Name = | Date modified Type Size 

7. In the Attach External Style JÈ COMPLETED 10/28/2010 5:11 PM_ File folder 

Sheet dialog box, click OK. J} CONTENT 10/29/20106:23PM_ File folder 

= 10/28/2010 510 PM File folder 


10/29/2010 7:05 PM 


Cascading Style S... 


Change default Link Relative To in the site definition. 


|| «| [rj 

| File name: styles.css =a 
Files of type: [Style Sheet Files (".css) M Cancel 
URL: styles.css 
Relative to: 
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D. Basics of CSS Rules 
There are three basic types of CSS rules: 


Tag rules (also called element rules) are CSS rules that are applied to any content that has been 
marked with that particular HTML tag. For example, to make all Heading 1 text look bold and pink, 
create a CSS tag rule for the h1 tag. 


Class rules are CSS rules that are applied to any content that has been marked with that class 
name. For example, to make the club name italic and bold everywhere that the club name is used in 
a paragraph, create a class rule and apply that class rule to all the club names. 


ID rules are CSS rules that are applied to any content that has been marked with that ID name. 
This is similar to a class rules, except that ID rules can only be applied to one item per page. 


E. Creating a tag rule CSS STYLES 

To change the font and background for the entire page, set a EM Current 

CSS rule for the body tag. [= 

1. Inthe HTML page, click the New CSS Rule button in the styles.cos 
CSS Styles panel. 


= Azt|++4| la) 


[UIT 


[ New CSS Rule 
2. In the New CSS Rules dialog cA Cca 
box, change the contextual Choose aggsfffittuial selector type for your CSS rule. p 


| Tag (redefines an HTML element) 


selector type to Tag. 


3. For the Selector Name, type 
body or select body from 
the drop-down list. 


4. For the Rule Definition, " 
make sure that your - 
external stylesheet is ) 
selected. Less Specific More Specific 


5. Click OK. 
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6. In the CSS Rule Definition dialog box, select your options for this rule. 


e Be minimal. Set only the options that you want to change. 


e For Font formatting, set options in the Type category. 


i 
CSS Rule Definition for body in styles.css 


Category 


Background 
Block 

Box 

Border 

List 
Positioning 
Extensions 


Type 


Font-family: Verdana, Geneva, sans-serif 


Font-size: 
Font-style: 


Line-height: 


Text-decoration: |" 


Font-weight: 


Font-variant: 


Text-transform: 


Color: | #096 


e For Background formatting, set options in the Background category. 


n 
CSS Rule Definition for body in styles.css 


Category 


Type 

Block 

Box 
Border 
List 
Positioning 
Extensions 


Background 


Background-color: GW CFF 


Background-image: 


Background-repeat: 


Background-attachment: 
Background-position (X): 
Background-position (Y): 


px 


px 


7. . Click Apply to preview your changes, or OK to save your changes. 


e To change the formatting of Heading 1, set a CSS rule for the h1 tag. 


e To change the formatting of Heading 2, set a CSS rule for the h2 tag. 
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F. Modifying a rule 


1. Find the rule that you want to change in the CSS Styles 
panel. 
e If you do not see the rule, you might need to click 
the All button to view all rules. 


2. Double-click the rule name. 


3. In the CSS Rule Definition dialog box, make your 


changes. font-family Verdana, Geneva, sans... 
Add Property 
3 Aat|++4} es £j oc 


4. Click OK. 


Bn 
CSS Rule Definition for body in styles.css 


Category Type 

em Font-family: Verdana, Geneva, sans-serif X 

Box 

Border Font-size: small * px Font-weight: - 

List 

Positioning Font-style: X Font-variant: X 
[| (Extensions 
i Line-height: 115 v Text-transform: M 
i Text-decoration: [F] underline Color: LI #000 


G. Creating a class rule CSS STYLES 


1. Inthe HTML page, click the New CSS Rule button in 
the CSS Styles panel. 


font-family Verdana, Geneva, sans... 


Add Property 
E= Ant [+4] JoP NES 
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2. Inthe New CSS Rules dialog 
box, change the contextual 
selector type to Class. 


3. For the Selector Name, type a 
name for the class. 
e The name must start with a 
period and must contain no 
spaces. 


4. For the Rule Definition, make 
sure that your external 
stylesheet is selected. 


n 
New CSS Rule 


contextual selector type for your CSS rule. 
[Glass (can apply to any HTML element) 


5. Click OK. 
6. Inthe CSS Rule Definition dialog box, select your options for this rule. 
7. Click OK. 


Bn 
CSS Rule Definition for .clubname in styles.css 


Category Type 
c Font-family: X 
Box : s m 
Border Font-size: v px Font-weight: SE X 
List 
Positioning Font-style: italic - Font-variant: - 
i| |Extensions 
i Line-height: v | px Text-transform: Y 
' Text-decoration: [F] underline Color: E| 


overline 
[E] line-through 
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H. Applying a class rule 


1. Select the text that you want to apply this rule to. 


The WARE SEE Weaving Clubfiejgery 
cirrent career annortinities evtend the nr 


2.  Inthe Property Inspector, change Class to the name ofthe class. 


The Underwater Basket Weaving Club orgai 
identifvina current career opportunities. extent 


Page Properties... List Item... 
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Vill. Managing Images 


Image files must be prepared in a graphics program before you can use them in Dreamweaver. They 
should be the proper image size and be optimized for the web. 


A. Inserting an image to be “in line with text” 


An image that is “in line with text” will appear exactly where you insert it. The text will not wrap 
around it. This is a good method if you want the image to be on its own line. 


T. 


2. 


Create an empty paragraph immediately below the Heading 1 title. 
Go to Insert Image. 
In the Select Image Source dialog box, navigate to the images folder and select your image. 


Click OK. 


i ——— Áo 
BD Select Image Source 


Select file name from: @) File system Site Root 


Data sources Server Image preview 


Look in: |J) images Y o av EP flv 


n 


mg. baskets.jpg 


| P 
— SA us v 


img basketweav... 


500 x 237 JPEG, 21K / 1 sec 


File name: img basket collage jpg 
| i a ee a 
| Files of type: | Image Files (“f:*jpa;"jpea:pna;"psd) ~) | Cancel |] 
| 

URL: images/img_basket_collage.ipg 


Relative to: Document ~| index temp.htm 


Change default Link Relative To in the site definition. 


[4| Preview images 
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5. In the Image Tag Accessibility Attributes dialog box, enter an Alternate text. 
e An “Alt Text” is essential for search engine optimization and accessibility for all significant 
images that you use in your web pages. 


| mm nen Attributes 9 see -— 


Alternate text: Basket weaving v 


Long description: http:// 


If you don't want to enter this information when inserting 
objects, change the Accessibility preferences. 


6. Click OK. 
| Dw Ev Ov Àv DESIGNER v | [0] Q cue (Sm j| 


File Edit View Insert Modify Format Commands Site Window Help 


index temp.htm* x 
styles.css* — 
|| Code | spit [ Design | | LiveCode ff || Live View | Inspect (&j, Multiscreen | A, (7 —— 


£3 @ Address: | file:///C|/Users/Helen/Desktop/DW Development/index_temp.htm 


C\Users\Helen\Desktop\DW Development\index_temp.htm 


font-weight 
Add Property 


bold 


Eg Site -Underwater Ba... 


The Underwater Basket Weaving Club organizes activities to assist members in evaluating careers in basket 


weaving and identifying current career opportunities, extend the practical underwater education with job- @ COMPLETED Folde 
specific knowledge and connect members with alumni and other weaving professionals. E.G CONTENT Fold 
w) academics.doc 23KB Micrc 
w) events.doc 23KB Micrc 
Popular Events PERE aes 
: " = : (Ml) join.doc 23KB Micrc 
Some of the club's more popular events include the Underwater Ball in the fall, a recruiting trip to the i) members.doc 2:KB Mac 
Caribbean, Friday visits to local basket weaving firms, happy hour gatherings with alumni, information sessions EQ) images Folde 
Ther caraarcleamnanince intende mranarsatian cacciane and aducsatiansal encciane an inh functiane 
«body» <p> RIIA 777x4917 23K /1sec Unicode (UTF-8) T) index temp.htm 2KB Firef 
PROPERTIES TE] styles.css 1KB Casc 
[Gsm] fom 
En CSS ID None X Link T5 


| £ 
QA 1 local items selected totalli (Log... ] 
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B. Inserting an image to be “floating” or “text-wrapped” 


If you want to have text wrap around your image, you must set an alignment to your image. This 
alignment can be set using HTML or by creating a CSS class rule for the image. 


1.  Clickatthe beginning of the paragraph where you 
want the image to appear. 


2. Go to Insert > Image. 


3.  IntheSelect Image Source dialog box, navigate to 
the images folder and select your image. 


Join Us 


Whether youpare interested in tech 
alpsarrier Reef, or leveragec 
organizes activities to ensure that 
available opportunities at Haas. 


4. Click OK. 
G 
[BB Select Image Source 
Select file name from: @) File system 
© Data sources Server 
Look in: |]; images ~ @2 P 


‘mem jack daniels.) 


| File name: 


mem jack, daniels jpg 


Image preview 


125 x 150 JPEG, 31K / 1 sec 


Files of type: [Image Files (gf^ipgz^ipeg^png^psd) v) 


URL: images/mem jack, daniels.jpg 


Relative to: index temp.htm 


Change default Link Relative To in the site definition. 


[4] Preview images 


5. Inthe Image Tag Accessibility Attributes dialog box, enter an appropriate Alternate Text. 


6. Click OK. 


n 
Image Tag Accessibility Attributes 


Jack Daniels X 


If you don't want to enter this information when inserting 
objects, change the Accessibility preferences. 
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7. | To make the text wrap around the image, select the image. 


Join Us 


hether you are interes! 
corporate war chest at the Great Barrier Re 
Weaving Club organizes activities to ensure 
spectrum of available opportunities at Haas 


8. Inthe Properties Inspector, from the Align drop-down list, select Left or Right. 
PROPERTIES | ———————— — 


— EE, 125 Src |/mem jack danielsjpg Cy (C) Alt Jack Daniels 
Ww 
Map 


ID H 150 Link Qt Ht gg 
V Space 


hether you are intei 
corporate war chest i 
Underwater Basket W 
achieve their goals wi 
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IX. Creating Lists 


The two main types of lists used in web pages are UL (unordered lists), otherwise known as 
bulleted lists, and OL (ordered lists), otherwise known as numbered lists. 


A. Creating a new web page for lists 


For our exercise, we will create a new web page for the Academics page. 


1. 


2. 


Create a new, blank HTML page. 
Save it at the top level of the Local Site folder as "academics temp.htm". 
Provide an appropriate page document title. 


Open the Academics.doc document from the CONTENTS folder, and copy and paste the text 
into the web page. 


Attach the external stylesheet. 


Apply any Heading 1 and Heading 2 formats as necessary. 


Save the file. 
TUN DEOS T DESIGNER + | O cue CEES 
File Edit View Insert Modify Format Commands Site Window Help 
a — — 
academics_temp.htm* X C:\Users\Helen\Desktop\ DW Development\academics_temp.htm — 
ADOBE BROWSERLAB 
styles.css* 
Code | Spit | Design | ^ LiveCode f4 Live View | Inspect Q), Multiscreen | A, Title: | Underwater Basket Weaving Academics a 
E @ Address: | file:///C|/Users/Helen/Desktop/DW Development/academics temp.htm A, [al current 
^ | All Rules 
Academic Programs E siess 
Please refer to the following lists of recommended classes for use in preparing for careers in these selected 
industries: | === 
| | Properties 
j Add Propert 
Underwater Investment Banking d 
MBA 222 Financial Information Analysis 
EE o2 93 
MBA 231 Corporate Finance BUSINESS CATALYST 
MBA 232 Financial Institutions and Markets pass 
je Underwater Be v | [Local view - 
MBA 233 Investments $a | Pre | F] 
: Local Files Size| Typ 
Corporate Basket Weaving B @ Site - Underwater Ba... Fold 
COMPLETED Folde 
MBA 223 Corporate Financial Reporting E CONTENT Folde 
W) academics.doc 23KB Micrc 
MBA 224A Managerial Accounting W) events.doc 23KB Micrc 
W) index.doc 23KB Micrc 
MBA 2278 Taxes and Firm Strategy W) join.doc 23KB Micrc 
W) members.doc 23KB Mia 
Basket Asset Management -|| Ee images Fold 
<body> <p> (R18) Q [100% »|817x491v 2K/1sec Unicode (UTF-8) T) academics temp... 1K8 Firef 
PROPERTIES T index temp.htm 2KB Firef 
- 
[<> Hm] Eormat [Paragraph ~| Class None - BI E13 Te f£) styles.css 1KB Casc 
Ein css ID None X Link "igo Target 
@_1 local items selected totalli 
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B. Inserting an Unordered List Underwater Investment Banking 


1. Select the paragraphs that you want — MEYNPPPNSEEREEPIEGTITIHEDT RE Ge ee 


to convert to an unordered list. 


MBA 231 Corporate Finance 
2.  Inthe Properties Inspector, click the i 


Unordered List button. 


MBA 232 Financial Institutions and Markets 
MBA 233 Investments 


PROPERTIES | 


[Om]! tme mese — 7) 


fh, Css ID None v 


Underwater Investment Banking 


MBA 222 Financial Information Analysis 
MBA 231 Corporate Finance 

MBA 232 Financial Institutions and Markets 
MBA 233 Investments 


C. Inserting an Ordered List 


Basket Asset Management 


1. Select the paragraphs that you want to 
convert to an ordered list. ABA 222 Financial Information Analysis 


232 Financial Institutions and Markets 


233 Investments 


A 235 Risk Management 


235 Portfolio Management 
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2.  Inthe Properties Inspector, click the Ordered List button. 
PROPERTIES n——— — : — 


pro 


fh, css ID None 


Basket Asset Management 


MBA 222 Financial Information Analysis 

MBA 232 Financial Institutions and Markets 
MBA 233 Investments 

MBA 235 Risk Management 

MBA 235 Portfolio Management 

MBA 236A Options and Futures Markets 
MBA 236B Investment Styles and Strategies 


Pal oi dural 0) ool Bs 
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X. Using Tables for Data 


If you want to display data in a well-structured format, create a table for data. For example, we can 
create a data table to display the pictures and names of the officers of our club. 


A. Creating a new web page for tables 


For our exercise, we will create a new web page for the Officers page. 

1. Create a new, blank HTML page. 

2. Save it at the top level of the Local Site folder as "officers temp.htm". 
3. Provide an appropriate page document title. 


4. Open the officers.doc document from the CONTENTS folder, and copy and paste title and first 
paragraph into the web page. 


5. Attach the external stylesheet. 
6. Apply any Heading 1 format as necessary. 


7. Save the file. 


Dw m- Oy år sw |B ] O cue CEES] 


File Edit View Insert Modify Format Commands Site Window Help 


officers temp2.htm* x D\DW Development\officers_ temp2.htm 


ADOBE BROWSERLAB 
styles.css* Y 
Code | Spit | Design | ^ LiveCode f4 Live View | Inspect (&j, Multscreen | A, Title: | Underwater Basket Weaving Officers 3 
E @ Address: | file:///C|/Users/Helen/Desktop/DW Development/officers temp2.htm A, [ A. |current 
All Rules 
Members — 
[body 
[—.dubname 
[-hi 
The current officers of the Underwater Basket Weaving club are: —h2 
Properties 
Add Propert: 
= Ant [ted] @2Hh7Ou 
BUSINESS CATALYST 
FILES 
[© Underwater Be ~ | (Local view -| 
Rojota eln 
Local Files Size| Typ 
E @ Site -Underwater Ba... Folde 
(COMPLETED Folde 
= CONTENT Folde 
W) academics.doc 23KB Micrc 
W) events.doc 23KB Micrc 
W) index.doc 23KB Micrc 
W) join.doc 23KB Micrc 
W) officers.doc 23KB Micrc 
= images Folde 
<body> [<p>] [R] Q [100% v|817x491v 1K/1sec Unicode (UTF-8) TÀ academics temp...  2KB Firef 
PROPERTIES T index temp.htm 2KB Firef 
= 
[€»rmw.] ^ Eormat [Paragraph — v] Cass None ~ BI iii: o me E Vows eii 
i css EM None z H 790 Target 4f) stes.css 1KB Casc 
@ Redy 
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B. Inserting a Table Members 


1. Create a new paragraph where you want the data table to 
appear. The current officers of the 


2. Go to Insert > Table. 


3. In the Table dialog box, enter the Table 
following options: Table size 
e Rows: 5 Rows: 5 Columns: 2 
e Columns: 2 NE 500 
e Table width: 500 pixels 
e Border thickness: 1 pixel 
e Cell padding: 5 
e Cell spacing: 0 
e Header: None 
4. Click OK. 


Members 


Tha ciirrant officarc nf the IIndarwatar Rackat Maavina clith ara: 
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5. In cells on the right column, copy and paste the name and information for each officer from 
the officers.doc document. 


6. In cells on the left column, insert images for each of the officers. 


Dw m #7 a | DESIGNER ~ | Osu CEES 
File Edit View Insert Modify Format Commands Site Window Help 
officers temp.htm X C.\Users\Helen\Desktop\DW Development\officers_temp.htm MM 
styles.css* Y 
Code | Spit | Design | | LiveCode f4 | Live View | Inspect (gj, Multisceen (c. Title: | Underwater Basket Weaving Officers 
E Q Address: | file:///C|/Users/Helen/Desktop/DW Development/officers temp.htm (m | iiid 
^ | all Rule: 
Members — 
The current officers of the Underwater Basket Weaving club are: 
— 
E| Add Property 
Jack Daniels, President 
Hometown China 38 Aad +4] e £y 
Undergraduate Shanghai University —— 
i —— 
(© underwater Be + | [Local view -] 
&eo|o260 8 E] 
Local Files Size| Typ 
Jane Smith, Vice President - Careers © © Site - Underwater Ba... Fold 
Hometown Springfield, NJ m-@ COMPLETED Folde 
Undergraduate University of New Jersey E CONTENT Folde 
Ú) academics.doc 23KB Micrc 
BY] events.doc 23KB Micrc 
lY] index.doc 23KB Micrc 
lY] join.doc 23KB Micrc 
W) officers.doc 23KB Micrc 
+ images Folde 
biti [RI Q [100% v|817x491v 163K /4sec Unicode (UTF-8) =) academics temp...  2KBFiref 
PROPERTIES T index temp.htm 2KB Firef 
- 
[€»rmw.] | Eormat [None v] des None - BI iii: o me z — o 
È) .css 
Bs css ID None nd Link *30 Target = 
Page Properties.. Iter d x: T 
Qj Rey To) 


C. Managing table and cell properties 


If you want to change the width, border, cell padding, cell spacing, or other properties of the table 
or table cells, you must select the HTML tag that controls that section. 


To make changes for the entire table, click inside the table and then select the <table> tag from 
the Tag Selector. Then, change the property in the Property Inspector. 


John Dok, Vice President - Alumni 
Hometown Bellevue, WA 


"IE 
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To make changes for one cell, click inside the cell and then select the <td> or <th>tag from the Tag 
Selector. Then, change the property in the Property Inspector. 


John Doe, Vice President - Alumni 
Hometown Bellevue, WA 
Undergraduate Harvard University 


To make changes for several cells, drag to select several cells in the table. The cells should become 
outlined. Then, change the property in the Property Inspector. 


Jane Smith, Vice President - Careers 
Hometown Springfield, NJ 
Undergraduate University of New Jersey 


©2010 Nishikai Consulting Page 40 


Dreamweaver CS5 - Module 1: Website Development 


XI. Creating Links 


You can create a link to an external website, or you can create a link to an internal web page. 
A. Creating an External Link 


1. Open a browser and browse to the website to which you want to link. 


2.  Inthe browser's address bar, select the URL and copy it. 
e You need to right-click and select copy, or use the Ctrl-C keyboard shortcut. In most 
browsers, you cannot use the Edit > Copy command. 


MB) Google - Mozilla Firefox 


«v - c A p] http://www.google.com/ 


3. In Dreamweaver, select the text that you want to 
use as your link. 


Jack Daniels, President 
Hometown China 


4.  Inthe Property Inspector, paste the URL into the Undergraduate SIASI IEAS 
Link field. 

5. Ifyou want the external website to open in a separate window, select, blank from the Target 
field. 


PROPERTIES 


(<> wm] Format [Paragraph — | 
fh, css ID None Y 
| mm rm 
Cell Horz |Defaut ~| W 
=F] [Defaut |) 
mide vet (Defaut v] H 


Target bd 


Jack Daniels, President 
Hometown China 


Undergraduate Shanghai University 
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B. Creating an Internal Link 


1. In Dreamweaver, select the text that you want to use as your link. 


3.  IntheSelect File dialog box, navigate to the file that you want to link to and select the file. The 
file must be inside the Local Site folder. 


4. Click OK. 


[^ 
EE =} 
Select file name from: @) File system Site Root 


©) Data sources Server 


Look in: j| DW Development -~ @@P - 


| Name Date modified Type 

J} COMPLETED 10/28/2010 5:11 PM_ File folder 

J} CONTENT 10/29/2010 9:05PM_ File folder 

Ji images 10/28/2010 5:10 PM File folder 

\@) academics temp.htm 10/29/2010 8:51 PM Firefox Document 
index temp.htm 10/29/2010 9:49 PM... Firefox Document 
\@) officers temp.htm 10/29/2010 9:49 PM — Firefox Document 
hi3 styles.css 10/29/2010 9:21 PM Cascading Style S... 


File name: index temp htm 


Files of type: [Al Files (°.*) 


URL: index_temp.htm 
Relative to: officers temp.htm 


Change default Link Relative To in the site definition. 


The current officers of the Underwater Basket Weaving club are: 
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XII. Basic Page Layout using CSS 


So far, we have been creating temporary pages that contain content, but they do not have the page 
layout that we sketched in our wireframe and mockup. 


To create page layout, the old way was to use table structures in HTML. However, the current 
method is to use CSS. Sections of the HTML code are surrounded by div tags which are given a 
specific ID name, and a CSS ID rule defines the size and other properties of that div group. 


A. Planning the Layout 


From the wireframe and mockup, decide how many div areas you need to create. You may need to 
nest div tags within each other to create certain layouts. Also decide what width and possibly what 
height each div must be. 


For example, in our sample website, we might create these div areas: 
wrapper: width=960px, padding=0, margin=0 


header: width=100%, height=70px, padding=0, margin=0, background 
color=#FC3 


main: width=100%, padding=0, margin=0 


nav: width=100px, 
float=left, 
padding=5, 
margin=0 


content: width=800 px, float=right, padding=5, 


margin=0 


footer: width=100%, height=5 0px, padding=5, margin=0 
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B. Creating a new web page for page layout 

1.  Createa new, blank HTML page. 

2. Save it at the top level of the Local Site folder as "template.htm". 
3. Provide an appropriate page document title. 

4. Attach the external stylesheet. 

5.  Savethe file. 


Dw m~ S àv DESIGNER v | [0] Q cue fotok 
File Edit View Insert Modify Format Commands Site Window Help 


template.htm x iclen\Desktop\DW Developmentitemplate.htm. - 


» 
ADOBE BROWSERLAB = 

styles.css T ———— 
| INSERT | = 


l Code | Split Design |  LiveCode FJ Live View | Inspect (&j, Mulüsceen fc. Title: | Haas Underwater Basket Weaving] 


E Q Address: | file:///C|/Users/Helen/Desktop/DW Development/template.htm 


Eg Site -Underwater Ba... 


(E) COMPLETED Folde 

Ei CONTENT Folde 

W) academics.doc 23KB Micrc 

W) events.doc 23KB Micrc 

W) index.doc 23KB Micrc 

W) join.doc 23KB Micrc 

W) officers.doc 23KB Micrc 

(E) images Folde 

RI Q [100% v|817x491* 1K/1sec Unicode (UTF-8) TÀ academics temp... — 2KB Firef 
d= Z) index temp.htm 2K8 Firef 
=) officers temp.htm 2KB Firef 

15 styles.css 1KB Casc 

=) template.htm 1KB Firef 


< mj r 


© _1 local items selected totalli (Log... ) 


C. Creating the Wrapper 


1. Click at the top of the page. 


2. Go to Insert Layout Objects Div tag. 
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3. Inthe Insert Div Tag dialog box, 
click New CSS Rule. 


4. In the New CSS Rule dialog box, 
select the following options: 


e Selector type: ID 
e Selector name: #wrapper 
e Rule Definition:  styles.css 


5. Click OK. 


6. Inthe CSS Rule Definition 
dialog box, select the following 
Box category options: 
e Width: 960px 
e Padding; 0 
e Margin: 0 


7. Click OK. 


f Insert Div Tag TM 
Insert: | At insertion point mcum 
e" s 
—— 


r 
New CSS Rule TM 
ES 
Choose a contextual selector type for your CSS rule. 
[ID (applies to only one HTML element) E 
Selector Name: | 
Choose or enter a name for your selector. 
#wrapper| 
This selector name will apply your rule to 
any HTML elements with id "wrapper". 
|] 
| 
Rule Definition: | 
Choose where your rule will be defined. Li 
a 
= a Cæ] | 
CSS Rule Definition for #wrapper in styles.css = 
Category Box 
Type 
and LN E 
|Box ; 
Border Height: v |px Clear: Y 
List Padding Margin 
Positioning 7 | 
Siders [V] Same for all [V] Same for all 
Right: | 0 px Right: | 0 px 
Bottom: | 0 px Bottom: | 0 px 
Left: | 0 px Left: | 0 px 


8. Inthe Insert Div Tag dialog box, make sure the ID field displays wrapper, then click OK. 
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D. Creating the Header 


1. Select the contents of the wrapper div and Content for id "wrapper" Goes Here 


delete it. 


2. Go to Insert > Layout Objects > Div tag. 


3.  IntheInsert Div Tag dialog box, click New CSS Rule. 


4. In the New CSS Rule dialog box, [New css Rule cum 
select the following options: Mu == 
e Selector type: ID Choose a contextual selector type for your CSS rule. — 
- Cancel 
e Selector name: #header LID (applies to only one HTML element) Z 
e Rule Definition: styles.css hay eae | 
Choose or enter a name for your selector. 

5. Click OK. man - | 
This selector name will apply your rule to | 
any HTML elements with id "header". 

|| 
> 
Choose where your rule will be defined. i 
i 
coe : ! 
[l 
ees L 
6.  IntheCSS Rule Definition CSS Rule Definition for #header in styles.css iens] 
dialog box, select the following 
. Category Background 
Background category options: Type 
Priora aee] : 
e Background color: #FC3 Block andmabenid Là. 
Se Bosna: - | 
List 
Positioning Background-repeat: X i 
Extensions 
Background-attachment: X 
| Background-position (X): v |px l 
Background-position (Y): v» |px \ 
Ll 
L] 
L] 
i] 
|| 
i 
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10. 


11. 


12. 


13. 


14. 


Select the following Box [ css Rule Definition for header in styles.css mim) 
category options: Em a 
e Width: 100% Type 
Background : = . - 

e Height: 70px Block Width: | 10 Float: 

: Border Height: 70 v Clear: | 
e Padding; 0 üst Padding nae 
e Margin: 0 brisa [v] Same for all V] Same for all 
Click OK. 


In the Insert Div Tag dialog box, make sure the ID field displays header, then click OK. 


To create the structure within the 


header, we will use a table. Select the 


placeholder text and delete it. 
Go to Insert Table. 


In the Table dialog box, select the 
following options: 

e Rows: 2 

e Columns: 2 

e Table width: 100 percent 

e Border thickness: 0 

e Cell padding: 0 

e Cell spacing: 0 

e Header: None 


Click OK. 


Do the following: 


|^ 
Table 
Table size 
Rows: 2 Columns: 2 
Table width: 100 
Border thickness: 0 pixels 

Celpaddng: 0 [EH 
Cell spacing: 0 EH 


e In the upper left cell, insert the image hdr_logo.gif. 


e In the upper right cell, insert the image hdr_studentclubs.gif. 


e Select both cells in the upper row and change the cell background color to #001F5B. 
e In the lower left cell, type the title "Underwater Basket Weaving Club". 


e [f there is time, create a CSS class rule called .classtitle to format the title. 


TheBerkeleyMBA 
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E. Creating the Main Area 


At this point, we have to position this next div tag precisely, within the wrapper section but outside 
the header section. The best method is to go into the Code view or Split view. 


— O 


2. Inthe code view, click between the ending </div> tag of the 


1. In the Document toolbar, click the Split 
button to view both the design and the 
code view. 


<body> 
<div id="wrapper 
<div id="heade 
<table width 
cellpadding="0"> 


<tr> 

header div and the ending </div> tag of the wrapper div. Press <td bgco 
Return to create a new blank line. "images/hdr logo 
«td bgco 


3. Go to Insert > Layout Objects > Div tag. "images/hdr stud 


"Student Clubs" 


4. Inthe Insert Div Tag dialog box, click New CSS Rule. </tr> 
<tr> 
5. Inthe New CSS Rule dialog box, select the following options: «td clas 
e Selector type: ID ee 
19 «td»&nbs 
e Selector name: #main 20 </tr> 
e Rule Definition:  styles.css 21 </table> 
6. Click OK. 23 
24 </div> 
7. Inthe CSS Rule Definition dialog box, select the following Box CINE </body> 
26 Naat 


category options: 
e Width: 100% 

e Padding; 0 

e Margin: 0 


8. Click OK. 

9. Inthe Insert Div Tag dialog box, make sure the ID field displays main, then click OK. 
F. Creating the Navigation Area 

1.  Selectthe placeholder text for the id "main" and delete it. 

2. Go to Insert Layout Objects Div tag. 

3.  IntheInsert Div Tag dialog box, click New CSS Rule. 


4. Inthe New CSS Rule dialog box, select the following options: 
e Selector type: ID 
e Selector name: nav 
e Rule Definition:  styles.css 


5. Click OK. 


©2010 Nishikai Consulting Page 48 


Dreamweaver CS5 - Module 1: Website Development 


6. In the CSS Rule Definition dialog box, select the following Box category options: 
e Width: 100px 
e Float: left 
e Padding; 5 
e Margin: 0 


7. Click OK. 
8. Inthe Insert Div Tag dialog box, make sure the ID field displays nav, then click OK. 


9. Select the placeholder text for id "nav", and enter the following 
text: TheBerkeleyMBA 
e Home 
e Academics 


e Events - events.htm 


e Officers | 
e Events Home 
e Join Us | 
Academics ' 

10. Select each text and type the name of the associated HTML file in | 
the Links field of the Property Inspector. Officers ' 
e Home = index.htm | 
e Academics = academics.htm Events ' 
e Officers = officers.htm | ; 
poin Us i 

i ' 


e Join Us = join.htm t 


PROPERTIES 


[Oma] feme 


fh, css ID None 


G. Creating the Content Area 
«div id-"main"» 
1. In the code view, click between the ending </div> tag — t 
f the nav div and the ending </div> tag of the main n 
Q 8 8 <p>Academics</p> 
div. Press Return to create a new blank line. 7 <p>Members</p> 
<p>Events</p> 
2. Go to Insert > Layout Objects > Div tag. <p>Join Us</p> 
> 
3.  IntheInsert Div Tag dialog box, click New CSS Rule. 1 Ws 
</body> 
</html> 


©2010 Nishikai Consulting Page 49 


Dreamweaver CS5 - Module 1: Website Development 


8. 


H 


In the New CSS Rule dialog box, select the following options: 
e Selector type: ID 

e Selector name: #content 

e Rule Definition:  styles.css 


Click OK. 


In the CSS Rule Definition dialog box, select the following Box category options: 
e Width: 800px 

e Float: right 

e Padding; 5 

e Margin: 0 


Click OK. 


In the Insert Div Tag dialog box, make sure the ID field displays content, then click OK. 


. Creating the Footer 


«div id-"main"» 
«div id-"nav"» 
<p>Home</p> 


In the code view, click between the 
ending </div> tag of the main div and 


the ending </div> tag of the wrapper <p>Academics</p> 
div. Press Return to create a new blank <p>Members</p> 
<p>Events</p> 
<p>Join Us</p> 


line. 


</div> 
«div id-"content"»Content for 
"content" Goes Here</div> 


Go to Insert Layout Objects Div 
tag. 


In the Insert Div Tag dialog box, click 
New CSS Rule. 


In the New CSS Rule dialog box, select 
the following options: 

e Selector type: ID 

e Selector name: footer 

e Rule Definition:  styles.css 


Click OK. 


In the CSS Rule Definition dialog box, select the following Box category options: 
e Width: 10096 

e Height: 50px 

e Clear: both 

e Padding; 5 

e Margin: 0 


id 
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7. Click OK. 
8. Inthe Insert Div Tag dialog box, make sure the ID field displays content, then click OK. 


9. Select the placeholder text and type a copyright statement. 


1 
fT----------------------------------------------------------------- 


‘copyright 2010 Haas Underwater Basket Weaving Club 


10. Save the file. 
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XIII. Creating More Pages 


We can use the template that we created in the previous section to create our final pages. 


A. Creating the Home page 
Savein: J} DW Development > O 5i E? mA 
1. Inthetemplate.htm page, go to File Bs Name i Date modified Type 
d Ji COMPLETED 10/28/2010511PM  Filefolder 
Save As. Recent Places |) CONTENT 10/29/2010 9:05 PM File folder 
E Lb images 10/28/2010 5310 PM File folder 
. \@ academics_temp.htm 10/29/2010 8:51 PM Firefox Document 
2. In the Save As dialog box, make Desktop €| index temp.htm 10/29/2010 9:49PM_ Firefox Document 
sure the location is the top level of \@) officers temp.htm 10/29/2010 9:49PM_ Firefox Document 
. =| © styles.css 10/29/2010 9:21 PM Cascading Style S... 
the Local Site folder. Libraries —— (8| template htm 10/29/2010 11:50... Firefox Document 
7 
3. For the File name, type index.htm. | Conner 
l a 
4. Click Save. are 
Unicode Normalization Form: M 
[F] Indude Unicode Signature (BOM) Site Root 
5. Go to the old index_temp.htm page. l j 


6. Select all the content and copy it. 


DW m~ $- àv DESIGNER ~ | [o] )Ocive CEES 


File Edit View Insert Modify Site Window 


Format Commands Help 


index temp.htm x [5s 


styles.css* Y 


ADOBE BROWSERLAB 


Code | Spit | Design | | LiveCode |[.—Í | LiveView | Inspect (gj, Multicreen | [4 Title: | Haas Underwater Basket Weavir 


€3 @ Address: | file: ///C|/ 


/DW Developme: 


Í 
B 
2 
a 

Ei 
g 
S 
& 


Add Property 


39 Ant [ted] an2 o 


BUSINESS CATALYST 


FILES | 

[E underwater Be ~ | [Local view -| 
&eoe[s20- [a 
[Local Files [ sizeli - 

he Underwater Basket Weaving Club E Serer 7] 
m- COMPLETED F| 

E CONTENT F| 

W) academics.doc 23KB M 

W) events.doc 23KB N 

W) index.doc 23KB M 
W) join.doc 23KB M= 

W) officers.doc 23KB M 

images F 

ST) academics temp... — 2KBF| 

= index.htm 2KB F 

Sarre =) index temp.htm 2KB F| 

| <> HTL | Format z Class None M EE Tile =) officers temp.htm 2KB F| 
B css ID None ~ Unk ” 30 Target T£) sties.css KCO 
=) template.htm ZXBF- 

GE ; 


(D 1 local items selected totalli (Log... ] 
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10. 


Go back to the new index.htm page. 


Select the placeholder text for the content area, and delete it. 


Paste the new content into the content area. 


Save the file. 


UW 


styles.css* 


File Edit View Inset Modify Format Commands Ste Window Help | Bv Qv &v 


indexhtm* x 


lex, htm 


Code | spit 


LiveCode F4 


Design | 


Live View 


Inspect (gj, Mulüsceen A, 


E Q Address: | file:///C|/Users/Helen /Desktop/DW Development/index.htm 


Title: | Haas Underwater Basket Weaving 


No 


ADOBE BROWSERLAB |f 


[DESIGNER ~ | O cu 


‘C\Users\Helen\Desktop\DW Development\i 


The Underwater Basket Weaving Club organizes activities to assist members in evaluating careers in basket weaving 
ind identifying current career opportunities, extend the practical underwater education with job-specific knowledge and 


! connect members with alumni and other weaving professionals. 


!Donular Fuente 


<body> <div#wrapper> <div#main> <div#content> 


[k]&y Qj [100% +) 1031x513 56K/2sec Unicode (UTF-8) 


PROPERTIES 
ma == — rm - BI © 
En css ID content X link & 
Page Properties... 
^ 


|» 


m 


margin 
padding 
width 

Add Property 


Et 


BUSINESS CATALYST 
FILES 


eua 


[© underwater Be v | [Local view M 
&ejoevase| 
Local Files Size|1 ^ 
E © Site -Underwater Ba... F| 
= COMPLETED F| 
B- CONTENT F 
W) academics.doc 23KB M 
W) events.doc 23KB M 
W) index.doc 23KB M 
W) join.doc 23KB ME 
W) officers.doc 23KB M 
HE images F 
"T, academics temp... ^ 2KBF| 
=) index.htm 2KBF| 
"Tj index temp.htm 2KBF 
=) offcers temphtm — 2KBF| 
TE) styles.css iKBc 
7 template.htm XBF- 
4 |. ' 
@©_ 1 local items selected totalli (Log... ) 


B. Creating the Academics page 


1. 


Save another 
copy of the 
template.htm 
file as 
academics.htm. 


Copy the old 
academics_temp 
.htm content 
into the 
academics.htm 
file. 


Save the file 


Dw 


Code | 


styles.cos 


Split 


Design | 


live Code [f m ©. aimee fe 


[Helen /Desktop/DW Development/academics.htm 


File Edit View Insert Modify Format Commands Ste Window Hep | B» Qv &v 


academicshtm* X 


Tite: Haas Underwater Basket Weaving 


| DESIGNER ~ | [o] 


] OQ cuve 


[s 


‘CAUsers\Helen\Desktop\DW Development\academics.ntm - 


MBA 222 Financial Information Analysis 
MBA 231 Corporate Finance 


MBA 232 Financial Institutions and Markets 


MBA 233 Investments 


! Corporate Basket Weaving 


MBA 223 Corporate Financial Reporting 
MBA 224A Managerial Accounting 
MBA 2278 Taxes and Firm Strategy 


asket Asset Management 


4 
|<body> <divewrapper> «divsmain» <div#content> 


cum 
Dri I -— Gat tre BT 
B», css ID content - Link 

Page Properties. 


i 


RO 


| (© Underwater Be ~ | [Local view - 
&eoeloovaso|m 
‘Local Files. Size ^ 
EL) Site -Underwater Ba... "y 
(& coweiETED F 
B- CONTENT F 
W) academics.doc 23KB M 
W) events.doc 238 N 
W) index.doc 23KB M 
Wi) join.doc 23KB ME 
W) officers.doc 23KB M 
© mages jl 
T) academics_temp....  2KB F| 
T) index.htm xB F| 
T) index temp.htm xB F| 
"T officers temp.htm 2er 
Bl ssescs xc 
T) template.htm 2B F + 
E] mj + 


i At [Hd] LIAE 


BUSINESS CATALYST 
FILES 


© 1 local items selected totalli (Log...) 
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C. Creating the Officers page 


1. Save another 
copy of the 
template.htm file 


as officers.htm. 


Copy the old 
officers temp.ht 
m content into 


the officers.htm 
file. 


Save the file 


W File Edit View Inset Modify Format Commands Site Window Hep | B» Qv &v 


officershtm* x 


styles.css 


| DESIGNER ~ | [o] 


] OQ cuve 


‘C\Users\Helen\Desktop\DW Developmentiofficers.htm 


live View | Inspect ©) Maltscreen B. 


live Code F4 


Title: Haas Underwater Basket Weaving 


"| 


[Helen /Desktop/DW Development/officers.htm 


ADOBE BROWSERLAB 


‘Members 


| The current officers of the Underwater Basket Weaving club are: 


Jack Daniels, President 


e Aah lH] 


BUSINESS CATALYST 
FILES. 


enünso 


D. Creating the Events page 


1. Save another 
copy of the 
template.htm file 


as events.htm. 


From the File 
panel, open the 
events.doc file. 


Copy text in 
events.doc into 
the events.htm 
file. 


Save the file. 


EIERID stescs 
Code | spit [ Design | 


live Code f4 | Live View | Inspect (gj, Multiscreen |, 


Title: Haas Underwater Basket Weaving 


ver ——— oa 
H Undergraduate Shanghai Universi 
: a &e[oovae[m 
Local Files | seh - 
E @ Ste -Underwater Ba... " 
(COMPLETED H 
EI content F| 
i) academics.doc 23KB M 
Jane Smith, Vice President - Careers JH) events.doc 238 N 
Hometown Springfield, NJ 1] index.doc 2x8 "s 
Undergraduate University of New Jersey W) jon.doc 23B M 
- W) offcers.doc 2x8 " 
q m , (E3 images F| 
<body> «divewrapper» <divémain> <div#content> (RIO Q [100% v|103ixSi3v 166K /4sec Unicode (UTF-8) TED scademics htm 30 F| 
PROPERTIES "T academics temp... zer 
rea "E. index.htm 38 F- 
Lm m Da n 9| Z^ 
[os] = i eA "T index temp.htm BF 
is css EM content hd es T 9o Target T) officers.htm EI 
T ofüers temphm  2BF ~ 
a |@_ Ready (log...) 
DW file Edit View Insert Modify Format Commands Ste Window Help | Mi» @v dv | DESIGNER v | [o] Q cue [e 


G\Users\Helen\Desktop\DW Development\events.htm 


of. 


©} @ Address: | file:///C|/Users/Helen/Desktop/DW Development/events.htm 


fs 


TheBerkeleyMBA 


is ‘Event Calendar 

Academics H 

BN Fall 2010 

Events ; 10/4/2011 Caribbean trip kick-off meeting, 5~6pm, F320 
Join Us i join us at the meeting. We want to meet those interested in the trip. 


111/19/2010 Jimmy Buffett Trip 


! The Underwater Basket Weaving Club is organizing a trip to Margaritaville for 
! Buffett Specialists on November 19. 


11/3/2011-1/9/2011 Caribbean Trip 


i with key recruiting contacts. 


F 1/3/2011 


A 15-7pm 
[<body> «d swrapper» «div&main» «divscontent» <p> 
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E. Creating the Join Us page 


1. Save another 
copy of the 
template.htm 
file as join.htm. 


2. From the File 
panel, open the 
join.doc file. 


3. Copy text from 
join.doc into 
the join.htm 
file. 


4. Save the file. 
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Join the Underwater Basket Weaving Club 


f you have any interest in pursuing an internship or career in a basket-weaving-related field, you should definitely 
onsider joining the Underwater Basket Weaving Club. Club members receive benefits that far outweigh the cost of 
membership. The majority of our events, including Underwater Ball, the Caribbean Trip and alumni happy hours, are open 
o club members only. In addition, you will receive access to the club member contact database, which is an invaluable 
ource for career networking. 


e2090 


{Membership are $30 for one year and $50 for two years. If you would like to join, please deposit a check made out to 
Í the "Haas Underwater Basket Weaving Club" and place it in John Doe's mailbox. Include the following information on the 
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F. Previewing in a Browser 


1. Go to the 
index.htm file. 


2. In the 
Document 
toolbar, click 
the Preview in 
Browser button 
and select a 
browser. 


3. Test the links 
in the 
navigation 
area. 


4.  Ifthere are any 
problems, 
come back to 
Dreamweaver 
and make 
changes. 
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ae The Haas Underwater Basket Weaving Club 
Officers i 
Events 


Join Us 


m 


The Underwater Basket Weaving Club organizes activities to assist members in evaluating careers in basket weaving 
and identifying current career opportunities, extend the practical underwater education with job-specific knowledge and 
connect members with alumni and other weaving professionals. 


Popular Events 


Some of the club's more popular events include the Underwater Ball in the fall, a recruiting trip to the Caribbean, Friday 
visits to local basket weaving firms, happy hour gatherings with alumni, information sessions about careers/companies, 
interview preparation sessions and educational sessions on job functions. 


Join Us 


hether you are interested in technology basket weaving in Silicon Valley, running the corporate war 
hest at the Great Barrier Reef, or leveraged buyouts on sunny beaches, the Underwater Basket 
eaving Club organizes activities to ensure that members are prepared to achieve their goals within 
the full spectrum of available opportunities at Haas. 
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